<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="author" content="wangbo">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 400px;
      height:200px;
      background-color: hotpink;
    }
  </style>
</head>

<body>
  <div class="box">
    <h2>买房摇号系统</h2>
    <span>林黛玉,薛宝钗,贾元春,贾迎春,贾探春,贾惜春,李纨,妙玉,史湘云,王熙凤,贾巧姐,秦可卿</span>
    <div class="qs">
      <h2>中奖人名</h2>
    </div>
    <div class="btns">
      <button class="start">开始</button>
      <button class="end" disabled="true">结束</button>
    </div>
  </div>
</body>
<script>
  //1,获取元素
  const name = document.querySelector('.qs h2') //获取显示名字
  const span = document.querySelector('span') //获取显示名字
  const go = document.querySelector('.btns .start') //开始按钮
  const end = document.querySelector('.btns .end') //结束按钮
  //2,设置变量
  //一个数组存储人员名单
  const arr = ['林黛玉','薛宝钗','贾元春','贾迎春','贾探春','贾惜春','李纨','妙玉','史湘云','王熙凤','贾巧姐','秦可卿']
  let endDate = 0 //把控制定时器的变量设为全局变量
  let random = 0; //为了在结束事件和随机数不冲突，把随机数也设为全局变量
  // random和endDate的值是会不断变化的，全局变量要改为let
  //3,封装随机数
  const getRandom = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min
  //4,当点击开始按钮
  go.addEventListener('click', () => {
    //4.1打开定时器，打开结束的禁用按钮，再禁用开始按钮
    end.disabled = false
    go.disabled = true

    endDate = setInterval(() => {
      //4.2 不断的获取随机数
      random = Math.floor(Math.random() * arr.length)
      // console.log(random);
      //4.3 把数组[random]渲染给name
      name.innerHTML = arr[random]
    }, 50)
  })
  //5,绑定结束事件
  end.addEventListener('click', () => {
    //5.1,关闭定时器
    clearInterval(endDate)
    //5.2 把抽到的名字从数组中删掉
    arr.splice(random, 1)
    //5.3结束以后，打开开始按钮，禁用结束按钮
    end.disabled = true
    go.disabled = false
    //5.4 结束点击以后，需要判定（如果数组中已经没人了，就不打开开始按钮了)
    if (arr.length <= 0) {
      go.disabled = end.disabled = true
    }
    span.innerHTML = arr.join()
    if (arr.length==0) {
      alert("摇号结束")
      return
    }
  })
</script>


</html>